<template>
  <div class="box">
    <el-button class="backgroundImg"  v-bind:style="testStyle" type="text" @click="dialogTableVisible = true" >
      <i class="el-icon-video-play"></i>
    </el-button>
    <h3>{{ Views.name }}</h3>
    <p></p>
      <el-dialog :visible.sync="dialogTableVisible" width="920px">
            <h2 class="title">{{Views.name}}</h2>
            <video style="width: 100% ; height: 100%" :src='Views.src' autoplay="autoplay" controls></video>
      </el-dialog>
  </div>

</template>

<script>
export default {
  props:['Views'],
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      testStyle: {
        backgroundImage: "url(" + this.Views.url +")"
      }
    };
  }
}
</script>
<style scoped>
.backgroundImg {
  background-repeat:no-repeat;
  width: 100%;
}
.box {
  width: 294px;
  height: 284px;
  float: left;
  margin-right: 10px;
}
 i {
  margin-top: 130px;
  margin-right: 200px;;
  width: 30px;
  background: #333333;
  border-radius: 50%;
  font-size: 30px;
  color: #FFFFFF;
}
 h3 {
  height: 21px;
  line-height: 21px;
  width: 268px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #333;
  margin-top: 35px;
  margin-left: 10px;
}
 p {
  height: 21px;
  line-height: 21px;
  width: 268px;
  margin-left: 10px;
}
el-table {
  text-align: center;
  margin-top: 100px;
}
.title {
  margin-bottom: 10px;
}



</style>